<template>
  <div class="applay-list">
    <div class="applay-header">
      <div class="applay-title" style="color: black">任务详情</div>
      <div class="nav">
        <div :class="{ show_class: navList[0] == 1 }" @click="showPage(0)">我的申请</div>
        <div :class="{ show_class: navList[1] == 1 }" @click="showPage(1)">工作列表</div>
        <div :class="{ show_class: navList[2] == 1 }" @click="showPage(2)">我的发布</div>
        <div :class="{ show_class: navList[3] == 1 }" @click="showPage(3)">任务列表</div>
      </div>
    </div>
    <MineApplay v-if="navList[0] == 1" />
    <WorkList v-else-if="navList[1] == 1"></WorkList>
    <MineFabu v-else-if="navList[2] == 1"></MineFabu>
    <RenWuList v-else-if="navList[3] == 1"></RenWuList>
  </div>
</template>

<script>
import MineFabu from '../../components/order/MineFabu.vue';
import MineApplay from '../../components/order/MineApplay.vue';
import RenWuList from './order/RenWuList.vue';
import WorkList from './order/WorkList.vue';

export default {
  components: {
    MineApplay,
    MineFabu,
    RenWuList,
    WorkList
  },
  data() {
    return {
      navList: [1, 0, 0, 0, 0],
    };
  },

  methods: {
    showPage(index) {
      this.navList.forEach((item, i) => {
        if (i === index) {
          this.navList[i] = 1;
        } else {
          this.navList[i] = 0;
        }
      });
    }

  }
};
</script>

<style lang="scss">
.flip-slide-enter-active {
  animation: flip-slide-in 0.5s forwards;
}

.flip-slide-leave-active {
  animation: flip-slide-out 0.5s forwards;
}

@keyframes flip-slide-in {
  0% {
    transform: rotateY(90deg);
    opacity: 0;
  }

  100% {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

@keyframes flip-slide-out {
  0% {
    transform: rotateY(0deg);
    opacity: 1;
  }

  100% {
    transform: rotateY(-90deg);
    opacity: 0;
  }
}

.flip-box {
  width: 200px;
  height: 200px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

// 定义颜色变量
$primary-color: #ffffff;
$secondary-color: #E8F5E9;
$text-color: #333;
$border-color: #C8E6C9;

.applay-list {
  width: 100vw;
  height: 100vh;
  position: fixed;
  // background-color: #fff;
  // border-radius: 10px;
  // box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  // margin: 10px;
  // padding: 10px;

  .applay-header {
    position: fixed;
    width: 100vw;
    height: 69px;
    top: 0;
    background-color: $primary-color;
    font-size: 22px;
    font-weight: 500;
    border-bottom: 1px solid #d3d3d3;
    color: #fff;
    text-align: center;

    .applay-title {
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #d3d3d3;
    }

    .nav {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 39px;

      .show_class {
        color: #ffffff;
        background-color: #a16f01;
        border-radius: 12px;
      }

      div {
        width: 16vw;
        height: 17px;
        line-height: 17px;
        text-align: center;
        color: #000000;
        font-size: 13px;
        // background-color: #e26c0c;
        border-radius: 3px;
      }

      // div:hover {
      //   background-color: #0ce20c;
      //   color: #fff;
      // }
    }
  }

  .applay-content::-webkit-scrollbar {
    display: none;
  }

  .applay-content {
    width: 100vw;
    position: fixed;
    background-color: #dee6d8;
    top: 70px;
    height: calc(100vh - 130px);
    overflow: auto;

    .applay-entry {
      border-bottom: 1px solid $border-color;
      width: 90vw;
      height: fit-content;
      margin-top: 10px;
      margin-left: 5vw;
      margin-bottom: 10px;
      background-color: #ffffff;
      border-radius: 8px;

      &:last-child {
        border-bottom: none;
      }

      .applay-field {
        span {
          border-bottom: 0.1px solid #000;
        }

        // background-color: #f32929;
        display: flex;
        flex-wrap: wrap;
        margin-top: 5px;
        margin-bottom: 5px;
        width: 84vw;
        max-width: 84vw;
        margin-left: 3vw;

        .field-label {
          flex: 0 0 30%;
          font-weight: bold;
          font-size: 13px;
          color: $text-color;
        }

        .field-value {
          flex: 0 0 70%;
          font-size: 13px;
          color: $text-color;
        }

        .but {
          margin-left: 30vw;
          width: 24vw;
          height: 24px;
          font-size: 14px;
          line-height: 24px;
          text-align: center;
          border-radius: 4px;
          color: #ffffff;
          margin-bottom: 5px;
          background-color: #15611f;
        }
      }
    }
  }
}
</style>
